<template>
	<view v-if="visible" class="co-popup animated fadeIn faster">
		<view class="co-popup-mask" @tap.stop="onCancel"></view>
		<view class="hint-middle" :style="{minHeight:minHeight,margin:margin}">
			<view class="title">
				{{title}}
			</view>
			<view v-if="isPic" @tap.stop="onCancel">
				<image class="pic" src="http://www.xvopen.com/xiaoV/img1/close.png" mode=""></image>
			</view>
			<view class="content" :style="{margin:contMargin,fontSize:contFontsize}">
				{{content}}
				<view v-if="subContent" class="sub-content" :style="{margin:subContMargin,fontSize:subContFontsize,color:subContColor}">
					{{subContent}}
				</view>
			</view>
			<view v-if="!isNoBtn" class="btn-box flex-aj-center">
				<view v-if="!isNoCancel" class="cancel" @tap="onCancel">
					{{cancel}}
				</view>
				<view class="confirm" @tap="onConfirm">
					{{confirm}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, watch} from "vue";
	
	const props = defineProps({
	  modelValue: {
	    type: Boolean
	  },
	  minHeight: {
	    type: String
	  },
	  margin: {
	    type: String
	  },
	  isPic: {
	    type: Boolean,
		default: false
	  },
	  isNoBtn: {
	    type: Boolean,
	  	default: false
	  },
	  isNoCancel: {
	    type: Boolean,
	  	default: false
	  },
	  title: {
	    type: String
	  },
	  content: {
	    type: String
	  },
	  contMargin: {
	    type: String
	  },
	  contFontsize: {
	    type: String
	  },
	  subContent: {
	    type: String
	  },
	  subContMargin: {
	    type: String
	  },
	  subContFontsize: {
	    type: String
	  },
	  subContColor: {
	    type: String
	  },
	  cancel: {
	    type: String,
	  	default: '取消'
	  },
	  confirm: {
	    type: String,
	  	default: '确认'
	  },
	})

const emits = defineEmits(['update:modelValue' ,'confirm'])
const visible = ref(false)
//-----------------------------------watch----------------
	  
	watch(() => props.modelValue,(newVal,oldVal) => {
		// console.log(newVal,'newValue')
		// console.log(oldVal,'oldValue')
	  visible.value = newVal
	},{immediate:true})
	
//-----------------------------------data-----------------



	
//-----------------------------------function-------------
	
	const onCancel = () => {
	  visible.value = false
	  // console.log(visible.value)
	  emits('update:modelValue',  visible.value)
	}

	const onConfirm = () => {
		emits('confirm')
	}

</script>

<style scoped lang="scss">
	.hint-middle{
		width: 542rpx;
		min-height: 301rpx;
		border-radius: 20rpx;
		padding-top: 32rpx;
		background-color: #fff;
		position: relative;
		z-index: 100;
		margin-top: -200rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: stretch;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
			text-align: center;
		}
		.pic{
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			top: 16rpx;
			right: 16rpx;
		}
		.content{
			color: #444;
			margin: 0 32rpx 24rpx;
			min-height: 110rpx;
			text-align: center;
			font-size: 28rpx;
			.sub-content{
				color: #999;
				font-size: 24rpx;
				margin: 16rpx 0 0;
			}
		}
		
		.btn-box{
			font-size: 32rpx;
			font-weight: bold;
			border-top: 1rpx solid rgba(229, 229, 229, 0.6);
			view{
				width: 271rpx;
				height: 93rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.cancel{
				color: #999;
				border-right: 1rpx solid rgba(229, 229, 229, 0.6);
			}
			.confirm{
				color: #0080FF;
			}
		}
	}
	
</style>
